<template>
	<view>
		<block v-if="isload">
			<view class="container">
				<view class="header">
					<view class="flex-y-center">
						<image class="header_icon" :src="logo"></image>
						<view class="flex1">
							<view class="header_name">{{ name }}</view>
							<view class="header_shop">
								<text>{{ address }}</text>
							</view>
							<!--<view class="header_shop">
								<text>选择门店:</text><text @tap="selectmd">{{mdlist[mdkey].name}}</text>
							</view>-->
						</view>
					</view>
				</view>
				<view class="page">
					<view class="page_title fontwight">消费总额</view>
					<view class="page_module flex-y-center" @click="handleShowKey">
						<text class="page_tag">￥</text>
						<!-- <input class="page_price flex1" type="digit" @input="inputMoney" placeholder="请输入金额"></input> -->
						<view class="page_price flex-y-center">
							<text v-if="keyHidden && !money" class="page_notice">请点击这里输入金额</text>
							<text v-if="money">{{ money }}</text>
							<view v-if="!keyHidden" class="page_cursor"></view>
						</view>
					</view>
					<view class="page_desc">可询问工作人员应缴费用总额</view>
					<view>
						<view class="info-box">


							<view class="dkdiv-item flex">
								<text class="f1">{{ t('优惠券') }}</text>
								<text class="f2" @tap="showCouponList"
									style="color:#e94745">{{ couponrid != 0 ? couponList[couponkey].couponname : '请选择' + t('优惠券') }}</text>
								<image class="f3" src="/static/img/arrowright.png"></image>
							</view>

							<view class="dkdiv-item flex flex-bt fontwight">
								<text class="t1">实付金额:</text>
								<text class="t2 paymoney">￥{{ paymoney }}</text>
							</view>

							<view class="op">
								<view class="btn" @tap="topay" :style="{ background: t('color1') }">去支付</view>
							</view>
						</view>
					</view>
				</view>
			</view>

			<view v-if="couponvisible" class="popup__container">
				<view class="popup__overlay" @tap.stop="handleClickMask"></view>
				<view class="popup__modal">
					<view class="popup__title">
						<text class="popup__title-text">请选择{{ t('优惠券') }}</text>
						<image src="/static/img/close.png" class="popup__close" style="width:36rpx;height:36rpx"
							@tap.stop="handleClickMask" />
					</view>
					<view class="popup__content">
						<couponlist :couponlist="couponList" :choosecoupon="true" :selectedrid="couponrid"
							@chooseCoupon="chooseCoupon"></couponlist>
					</view>
				</view>
			</view>

			<view class="keyboard_page">
				<!--<view class="keyboard_none"></view>
				<view class="keyboard_top"></view>-->
				<view class="keyboard_key hind_box" :class="menuindex > -1 ? 'tabbarbot' : 'notabbarbot'">
					<view class="key-box">
						<view class="number-box clearfix">
							<view v-for="(item, index) in KeyboardKeys" :key="index">
								<view v-if="money < 10000" :class="index === 9 ? 'key' : 'key'"
									hover-class="number-box-hover" @click="handleKey(item)">{{ item }}</view>
								<view v-else :class="index === 9 ? 'key' : 'key'" hover-class="number-box-hover">
									{{ item }}</view>
							</view>

							<view class="key keydel" hover-class="number-box-hover" @click="handleKey('X')">删除</view>
						</view>
					</view>
				</view>
			</view>
		</block>
		<loading v-if="loading"></loading>
		<dp-tabbar :opt="opt" @getmenuindex="getmenuindex"></dp-tabbar>
		<popmsg ref="popmsg"></popmsg>
	</view>
</template>

<script>
var app = getApp();

export default {
	data() {
		return {
			pre_url: app.globalData.pre_url, static_url: app.globalData.static_url,
			opt: {},
			loading: false,
			isload: false,
			menuindex: -1,

			bid: 0,
			ymid: 0,
			hiddenmodalput: true,
			wxpayst: '',
			alipay: '',
			paypwd: '',
			moneypay: '',
			mdlist: "",
			name: "",
			userinfo: "",
			couponList: [],
			couponrid: 0,
			coupontype: 1,
			usescore: 0,
			money: '',
			disprice: 0,
			businessdisprice: 0,
			fullmoney: 0,
			dkmoney: 0,
			couponmoney: 0,
			paymoney: 0,
			mdkey: 0,
			couponvisible: false,
			couponkey: 0,
			logo: "",
			address: "",

			KeyboardKeys: [1, 2, 3, 4, 5, 6, 7, 8, 9, 0, '.'],
			keyHidden: false,
			selectmdDialogShow: false,

			business: {}
		};
	},

	onLoad: function (opt) {
		this.opt = app.getopts(opt);
		this.bid = this.opt.bid || 0;

		if (opt.q) {
			var params = decodeURIComponent(opt.q)
			console.log('=============opstions================', params);
			var vars = params.split("?");
			for (var i = 0; i < vars.length; i++) {
				var pair = vars[i].split("=");
				if (pair[0] == 'bid') {
					this.bid = pair[1];
				}
			}
		}
		console.log(opt, 99999);

		if (!this.bid) {
			uni.navigateBack();
		}
		if (this.opt.ymid) {
			this.ymid = this.opt.ymid;
			app.globalData.pid = this.opt.ymid;
			uni.setStorageSync('pid', this.opt.ymid);
		}
		this.getdata();
	},
	onPullDownRefresh: function () {
		this.getdata();
	},
	methods: {
		chooseCoupon: function (e) {
			var couponrid = e.rid;
			var couponkey = e.key;

			if (couponrid == this.couponrid) {
				this.couponkey = 0;
				this.couponrid = 0;
				this.coupontype = 1;
				this.couponmoney = 0;
				this.couponvisible = false;
			} else {
				var couponList = this.couponList;
				var couponmoney = couponList[couponkey]['money'];
				var coupontype = couponList[couponkey]['type'];
				if (coupontype == 4) {
					couponmoney = this.freightprice;
				}
				this.couponkey = couponkey;
				this.couponrid = couponrid;
				this.coupontype = coupontype;
				this.couponmoney = couponmoney;
				this.couponvisible = false;
			}
			this.calculatePrice();
		},
		handleHiddenKey() {
			this.keyHidden = true;
		},
		// 显示键盘
		handleShowKey() {
			this.keyHidden = false;
		},
		// 键盘输入
		handleKey(key) {
			const that = this
			const {
				money
			} = this

			// 删除金额
			if (key === 'X') {
				if (money !== '') {
					const payMoney = money.slice(0, money.length - 1)
					that.money = payMoney
				}
			} else {
				// 添加金额
				const payMoney = money + key
				console.log(/^(\d+\.?\d{0,2})$/.test(payMoney), payMoney, 'payMoney')
				if (/^(\d+\.?\d{0,2})$/.test(payMoney)) {
					that.money = payMoney
				}

				if (that.money > 10000) {
					app.error('付款金额不允许大于10000'); return;
				}
			}
			this.calculatePrice();
		},


		getdata: function () {
			var that = this; //获取产品信息
			that.loading = true;
			app.get('Facepay/facepay', {
				bid: that.bid
			}, function (res) {
				that.loading = false;
				if (res.status == 0) {
					app.alert(res.msg, function () {
						app.goback();
					});
					return;
				}
				var userinfo = res.userinfo;
				var couponList = res.couponList;
				var mdlist = res.mdlist;
				that.wxpayst = res.wxpayst;
				that.alipay = res.alipay;
				that.couponList = res.couponList;
				that.mdlist = res.mdlist;
				that.moneypay = res.moneypay;
				that.name = res.name;
				that.userinfo = res.userinfo;
				that.logo = res.logo;
				that.address = res.address;
				that.business = res.business;
				that.loaded();

				if (mdlist.length > 0) {
					app.getLocation(function (res) {
						var latitude = res.latitude;
						var longitude = res.longitude;
						var speed = res.speed;
						var accuracy = res.accuracy;

						for (var i in mdlist) {
							mdlist[i].juli = that.GetDistance(latitude, longitude, mdlist[i]
								.latitude, mdlist[i].longitude);
						}

						mdlist = mdlist.sort(that.compare('juli'));
						console.log(mdlist);
						that.mdlist = mdlist;
					});
				}
			});
		},
		modalinput: function () {
			this.$refs.dialogInput.open()
		},
		//选择门店
		selectmd: function (e) {
			var that = this;
			var itemlist = [];
			var mdlist = this.mdlist;
			for (var i = 0; i < mdlist.length; i++) {
				itemlist.push(mdlist[i].name + (mdlist[i].juli ? ' 距离:' + mdlist[i].juli + '千米' : ''));
			}
			if (itemlist.length > 6) {
				that.selectmdDialogShow = true;
			} else {
				uni.showActionSheet({
					itemList: itemlist,
					success: function (res) {
						if (res.tapIndex >= 0) {
							that.mdkey = res.tapIndex;
						}
					}
				});
			}
		},
		selectmdRadioChange: function (e) {
			this.mdkey = e.currentTarget.dataset.index;
			this.selectmdDialogShow = false;
		},
		hideSelectmdDialog: function () {
			this.selectmdDialogShow = false
		},
		//积分抵扣
		scoredk: function (e) {
			var usescore = e.detail.value[0];
			if (!usescore) usescore = 0;
			this.usescore = usescore;
			this.calculatePrice();
		},
		inputMoney: function (e) {
			console.log(e);
			var money = e.detail.value;
			if (!money) money = 0;
			var money = parseFloat(money);
			if (money <= 0) money = 0;
			this.money = money;
			this.calculatePrice();
		},
		cancel: function () {
			this.hiddenmodalput = true;
		},
		//计算价格
		calculatePrice: function () {
			var that = this;

			var money = ''
			if (that.money == '') {
				money = 0;
			} else {
				money = parseFloat(that.money);
			}
			//会员折扣
			if (that.userinfo.discount > 0 && that.userinfo.discount < 10) {
				var disprice = Math.round(money * (1 - 0.1 * that.userinfo.discount) * 100) / 100; //-会员折扣
			} else {
				var disprice = 0;
			}

			//门店折扣
			if (that.business.facepay_discount > 0 && that.business.facepay_discount < 100) {
				var businessdisprice = Math.round(money * (100 - that.business.facepay_discount)) / 100; //-会员折扣
			} else {
				var businessdisprice = 0;
			}

			//满减
			if (that.business.facepay_fullmoney > 0 && that.business.facepay_reductionmoney > 0) {
				if (money - businessdisprice - disprice > that.business.facepay_fullmoney) {
					var fullmoney = that.business.facepay_reductionmoney;
				} else {
					var fullmoney = 0;
				}
			} else {
				var fullmoney = 0;
			}

			var couponmoney = parseFloat(that.couponmoney); //-优惠券抵扣 
			if (that.usescore) {
				var dkmoney = parseFloat(that.userinfo.dkmoney); //-积分抵扣
			} else {
				var dkmoney = 0;
			}
			var scoredkmaxpercent = parseFloat(that.userinfo.scoredkmaxpercent); //最大抵扣比例
			if (dkmoney > 0 && scoredkmaxpercent >= 0 && scoredkmaxpercent < 100 &&
				dkmoney > (money - disprice - couponmoney) * scoredkmaxpercent * 0.01) {
				dkmoney = (money - disprice - couponmoney) * scoredkmaxpercent * 0.01;
			}

			var paymoney = money - businessdisprice - disprice - fullmoney - couponmoney - dkmoney; // 商品金额 - 门店折扣 - 会员折扣 -满减- 优惠券抵扣 - 积分抵扣
			if (paymoney < 0) paymoney = 0;
			paymoney = paymoney.toFixed(2);
			that.paymoney = paymoney;
			that.disprice = disprice;
			that.businessdisprice = businessdisprice;
			that.fullmoney = fullmoney;
			that.dkmoney = dkmoney;
		},
		chooseCoupon: function (e) {
			var couponrid = e.rid;
			var couponkey = e.key;

			if (couponrid == this.couponrid) {
				this.couponkey = 0;
				this.couponrid = 0;
				this.coupontype = 1;
				this.couponmoney = 0;
				this.couponvisible = false;
			} else {
				var couponList = this.couponList;
				var couponmoney = couponList[couponkey]['money'];
				var coupontype = couponList[couponkey]['type'];
				if (coupontype == 4) {
					couponmoney = this.freightprice;
				}
				this.couponkey = couponkey;
				this.couponrid = couponrid;
				this.coupontype = coupontype;
				this.couponmoney = couponmoney;
				this.couponvisible = false;
			}
			this.calculatePrice();
		},
		topay: function (e) {
			var that = this;
			var money = that.money;
			var couponrid = that.couponrid;
			var usescore = that.usescore;

			if (that.mdlist.length > 0) {
				var mdid = that.mdlist[that.mdkey].id;
			} else {
				var mdid = 0;
			}

			if (that.money > 10000) {
				app.error('付款金额不允许大于10000'); return;
			}

			app.post('Facepay/facepay', {
				bid: that.bid,
				ymid: that.ymid,
				money: money,
				couponrid: couponrid,
				usescore: usescore,
				mdid: mdid
			}, function (res) {
				if (res.status == 0) {
					app.error(res.msg);
					return;
				}
				app.goto('/pages/pay/pay?id=' + res.payorderid);
			});
		},
		showCouponList: function () {
			this.couponvisible = true;
		},
		handleClickMask: function () {
			this.couponvisible = false;
		},
		GetDistance: function (lat1, lng1, lat2, lng2) {
			var radLat1 = lat1 * Math.PI / 180.0;
			var radLat2 = lat2 * Math.PI / 180.0;
			var a = radLat1 - radLat2;
			var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;
			var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(radLat1) * Math.cos(radLat2) *
				Math.pow(Math.sin(b / 2), 2)));
			s = s * 6378.137; // EARTH_RADIUS;
			s = Math.round(s * 100) / 100;
			return s;
		},
		compare: function (property) {
			return function (a, b) {
				var value1 = a[property];
				var value2 = b[property];
				return value1 - value2;
			};
		}
	}
}
</script>
<style>
page {
	background: #f0eff4 !important;
}

.container {
	position: fixed;
	height: 100%;
	width: 100%;
	overflow: hidden;
}

.header {
	position: relative;
	padding: 30rpx;
	background: #fff;
	margin: 36rpx;
	border-radius: 32rpx;
}

.header_text {
	font-size: 24rpx;
	color: #666;
}

.header_name {
	font-size: 28rpx;
	color: #333;
	font-weight: bold;
}

.header_icon {
	position: relative;
	height: 116rpx;
	width: 116rpx;
	border-radius: 10rpx;
	background: #eb544d;
}

.flex1 {
	margin-left: 20rpx;
}

.header_shop {
	font-size: 28rpx;
	color: #9d9d9d;
	margin-top: 10rpx;
}

.page {
	position: relative;
	padding: 50rpx 30rpx;
	border-radius: 32rpx;
	background: #fff;
	box-sizing: border-box;
	margin: 36rpx;
}

.page_title {
	font-size: 24rpx;
	color: #333;
}

.page_module {
	position: relative;
	height: 125rpx;
	border-bottom: 1px solid #f0f0f0;
}

.page_notice {
	color: #999;
	font-size: 32rpx;
	font-weight: normal;
}

.page_tag {
	font-size: 58rpx;
	color: #333;
	font-weight: bold;
}

.page_price {
	margin-left: 20rpx;
	font-size: 54rpx;
	color: #333;
	font-weight: bold;
}

.page_title {
	color: #333;
	font-size: 32rpx;
}

.page_desc {
	color: #9e9e9e;
	font-size: 28rpx;
	padding-top: 18rpx;
}

.page_cursor {
	width: 4rpx;
	height: 70rpx;
	background: #eb544d;
	border-radius: 6rpx;
	animation: twinkling 1.5s infinite;
}

@keyframes twinkling {
	0% {
		opacity: 0;
	}

	90% {
		opacity: .8;
	}

	100% {
		opacity: 1;
	}
}

.info-box {
	position: relative;
	background: #fff;
}

.info-item {
	display: flex;
	align-items: center;
	border-bottom: 1px #f3f3f3 solid;
}

.info-item:last-child {
	border: none
}

.info-item .t1 {
	width: 200rpx;
	height: 120rpx;
	line-height: 120rpx;
	color: #000;
}

.info-item .t2 {
	height: 120rpx;
	line-height: 120rpx;
	color: #000;
	text-align: right;
	flex: 1;
	font-size: 28rpx
}

.info-item .t2 input {
	height: 80rpx;
	line-height: 80rpx;
	border: 1px solid #f5f5f5;
	padding: 0 5px;
	width: 240rpx;
	font-size: 30rpx;
	margin-right: 10rpx
}

.dkdiv {
	margin-top: 20rpx
}

.dkdiv-item {
	width: 100%;
	padding: 16rpx 0;
	background: #fff;
	/*border-bottom: 1px #ededed solid;*/
}

.dkdiv-item:last-child {
	border: none;
}

.dkdiv-item .f1 {}

.dkdiv-item .f2 {
	text-align: right;
	flex: 1
}

.dkdiv-item .f3 {
	width: 30rpx;
	height: 30rpx;
}

.fpay-btn {
	width: 90%;
	margin: 0 5%;
	height: 80rpx;
	line-height: 80rpx;
	margin-top: 40rpx;
	float: left;
	border-radius: 10rpx;
	color: #fff;
	background: #eb544d;
	border: none;
	font-size: 30rpx;
}

.fpay-btn2 {
	width: 90%;
	margin: 0 5%;
	height: 80rpx;
	line-height: 80rpx;
	margin-top: 20rpx;
	float: left;
	border-radius: 10rpx;
	color: #fff;
	background: #e2cc05;
	border: none;
	font-size: 30rpx;
}

.mendian {
	width: 90%;
	line-height: 60rpx;
	border-radius: 10rpx;
	padding: 30rpx 5%;
	height: 800rpx;
	overflow-y: scroll;
	border: none;
	border-radius: 5px;
	-webkit-animation-duration: .5s;
	animation-duration: .5s;
}

.mendian label {
	display: flex;
	align-items: center;
	border-bottom: 1px solid #f5f5f5;
	padding: 20rpx 0;
	color: #333
}

.mendian input {
	margin-right: 10rpx
}

.submit {
	text-align: center
}

.mendian button {
	padding: 20rpx 60rpx;
	border-radius: 40rpx;
	border: 0;
	margin-top: 20rpx;
	color: #fff;
	background: #31C88E
}

.i-as {
	position: fixed;
	width: 100%;
	box-sizing: border-box;
	left: 0;
	right: 0;
	bottom: 0;
	background: #f7f7f8;
	transform: translate3d(0, 100%, 0);
	transform-origin: center;
	transition: all .2s ease-in-out;
	z-index: 900;
	visibility: hidden
}

.i-as-show {
	transform: translate3d(0, 0, 0);
	visibility: visible
}

.i-as-mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, .7);
	z-index: 900;
	transition: all .2s ease-in-out;
	opacity: 0;
	visibility: hidden
}

.i-as-mask-show {
	opacity: 1;
	visibility: visible
}

.i-as-header {
	background: #fff;
	text-align: center;
	position: relative;
	font-size: 30rpx;
	color: #555;
	height: 80rpx;
	line-height: 80rpx
}

.i-as-header::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 200%;
	height: 200%;
	transform: scale(.5);
	transform-origin: 0 0;
	pointer-events: none;
	box-sizing: border-box;
	border: 0 solid #e9eaec;
	border-bottom-width: 1px
}

.i-as-cancel {
	margin-top: 20rpx
}

.i-as-cancel button {
	border: 0
}

.i-as-cancel button::after {
	border: 0;
}

.i-as-content {
	height: 700rpx;
	width: 710rpx;
	margin: 20rpx;
}


.op {
	width: 96%;
	margin: 20rpx 2%;
	display: flex;
	align-items: center;
	margin-top: 40rpx
}

.op .btn {
	flex: 1;
	height: 100rpx;
	line-height: 100rpx;
	background: #eb544d;
	width: 90%;
	margin: 0 10rpx;
	border-radius: 10rpx;
	color: #fff;
	font-size: 28rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center
}

.op .btn .img {
	width: 48rpx;
	height: 48rpx;
	margin-right: 20rpx
}


.keyboard_page {
	/*position: fixed;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 999;*/
}

.keyboard_none {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
}

.keyboard_top {
	background-color: #fff;
	height: 16rpx;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 428rpx;
	height: 16rpx;
	z-index: 10;
	background: #fff;
	z-index: 9999999999;
	transition: height 0.3s;
}

.keyboard_key {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	height: 0;
	z-index: 1;
	transition: height 0.3s;
	padding: 86rpx 0 0 0;
}

.hind_box {
	height: 515rpx;
}

.key-box {
	display: flex;
	padding-left: 16rpx;
	padding-bottom: 16rpx;
	padding-bottom: calc(16rpx + constant(safe-area-inset-bottom));
	padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
}

.key-down {
	height: 50rpx;
	width: 50rpx;
	display: block;
	margin: 0 auto;
}

.number-box {
	flex: 3;
}

.number-box .key {
	float: left;
	margin: 6rpx 6rpx 0px 0;
	width: calc(100% / 3 - 10rpx);
	height: 90rpx;
	border-radius: 10rpx;
	line-height: 90rpx;
	text-align: center;
	font-size: 36rpx;
	font-weight: bold;
	background-color: #fff;
}

.number-box .keydel {
	background: #dde1ea !important;
}

.number-box .key.key-zero {
	width: calc((100% / 3) * 2 - 16rpx);
}

.keyboard .number-box-hover {
	/* 临时定义颜色 */
	background-color: #e1e1e1 !important;
}

.btn-box {
	flex: 1;
}

.btn-box .key {
	margin: 16rpx 16rpx 0 0;
	height: 90rpx;
	border-radius: 10rpx;
	line-height: 90rpx;
	text-align: center;
	font-size: 40rpx;
	font-weight: bold;
	background-color: #fff;
}

.btn-box .pay_btn {
	height: 298rpx;
	line-height: 298rpx;
	font-weight: normal;
	background-color: #eb544d;
	color: #fff;
	font-size: 32rpx;
}

.btn-box .pay_btn.pay-btn-display {
	background-color: #eb544d !important;
}

.btn-box .pay_btn.pay-btn-hover {
	background-color: #eb544d;
}

.pstime-item {
	display: flex;
	border-bottom: 1px solid #f5f5f5;
	padding: 20rpx 30rpx;
}

.pstime-item .radio {
	flex-shrink: 0;
	width: 32rpx;
	height: 32rpx;
	background: #FFFFFF;
	border: 2rpx solid #BFBFBF;
	border-radius: 50%;
	margin-right: 30rpx
}

.pstime-item .radio .radio-img {
	width: 100%;
	height: 100%
}

.paymoney {
	color: red
}

.fontwight {
	font-weight: bold;
}

.coupon .pt_left .f2 {
	color: #fff !important
}
</style>
